<!DOCTYPE html>
<html lang="zh">
<head>
	<title>弹簧的妙妙屋</title>
	<meta charset="UTF-8">
	<link  href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="./css/css02.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	
	
	<!-- <link rel="stylesheet" type="text/css" href="../qianduan/swiper/swiper-bundle.css"> -->
	
	
</head>
<body>
	<div class="head01">
		<div class="head02">
			<div class="L">
				<div class="text">弹簧的良品铺子</div>
			</div>
			
			<div class="S-box">
				<input type="text" class="S-txt" placeholder="油炸皮卡丘?">
					<a class="S-btn">
						<i class="fa fa-search" aria-hidden="true"></i>			</a>
			
			</div>
	
			<div class="G1">
				<div class="button-man"><a href="#"><!-- 个人中心 --></a></div>
				
			</div>		
			<!--  -->
			
			<div class="G2">
				<div class="button-shopping"><a href="#"><!-- 购物车 --></a></div>
				
				</div>
				
				<div class="picture-man">
					<a href="./user-center.html"><i class="fa fa-user-o fa-2x fa-inverse" aria-hidden="true"></i></a>
				</div>
				<div class="picture-shopping">
					<i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
				</div>
			
			</div>
			</div>
	
	
	<div class="boddy1">
		<div class="YOU">
			<div class="big-box">
				<div class="small-box">
				
			   <div class="img"><img src="./img/ox/1.jpg" alt=""></div>
			   <div class="img"><img src="./img/ox/2.jpg" alt=""></div>
			   <div class="img"><img src="./img/ox/3.jpg" alt=""></div>
			   <div class="img"><img src="./img/ox/4.jpg" alt=""></div>
			   <div class="img"><img src="./img/ox/5.jpg" alt=""></div>
			   
				</div>
			</div>
		</div>
		</div>
		
	<div class="boddy2">
		<div class="MY">
			<a href="./product.html"><div class="star-unkind-1">
				  <img src="./img/jp/1.jpg" alt="">
				
				<div class="text-1">
					<h2>MX-BOARD 6.0 <span>白轴</span> 樱桃（CHERRY）</h2>
					<p>传统RGB BiLiBiLi主题键帽 100档亮度调节 ￥1299</p>
				</div></div></a>
				
				
			<a href="./product.html"><div class="star-unkind-2">
				<img src="./img/jp/2.jpg" alt="">
				
				<div class="text-1">
					<h2>G-20-3000 <span>木犀轴</span> PS2接口 <span>  <br>22娘键帽</span>(Roning)</h2>
					<p>标准86键设计 有效减轻手部疲劳 ￥900</p>
				</div></div></a>
				
				
				
				
				
				
			<a href="./product.html"><div class="star-unkind-3">
				<img src="./img/jp/3.jpg" alt="">
				
				<div class="text-1">
					<h2>良辰美景 <span>青轴（限定款）</span> <br>——不问天</h2>
					<p>定制客制化 无需多言 价格面仪 女生自提</p>
				</div></div>
            </a>
				
				
				
				
				
			<a href="./product.html"><div class="star-unkind-4">
				<img src="./img/jp/4.jpg" alt="">
				
				<div class="text-1">
					<h2>万代（BANDA）<span>天下无双</span><br>强袭-铁血巴巴托斯 </h2>
					<p>你的腰不弯，别人就不能骑在你的背上。￥648</p>
				</div></div></a>
				
				
				
				
				
				
                <a href="./product.html"><div class="star-unkind-5">
				<img src="./img/jp/5.jpg" alt="">
				
				<div class="text-1">
					<h2>霓虹骑士 <span>青轴（TTC）</span> <br>100档亮度调节 带手托</h2>
					<p>支持定制客制化 ￥799-￥1299</p>
				</div></div></a>
						
						
						
						
						
						
                <a href="./product.html"><div class="star-unkind-6">
				<img src="./img/jp/6.jpg" alt="">
				
				<div class="text-1">
					<h2>初音未来-歌姬 <span>（樱桃CHERRY）黑轴</span> <br>你是歌姬吧</h2>
					<p>
						MX8.0-G8-HUAEU-0  无光    ￥400
					</p>
				</div></div></a>
						
						
						
						
						
						
                <a href="./product.html"><div class="star-unkind-7">
				<img src="./img/jp/7.jpg" alt="">
				
				<div class="text-1">
					<h2>（自改）良辰美景 <span>——奈何天</span> <br>（樱桃CHERRY）青轴</h2>
					<p>自用客制化 无需多言 价格面仪 需自提</p>
				</div></div></a>
						
						
						
						
						
						
                <a href="./product.html"><div class="star-unkind-8">
				<img src="./img/jp/8.jpg" alt="">
				
				<div class="text-1">
					<h2>EVA 初号机 <span>青轴（TTC轴）</span> <br>黑爵新国货 87键带线</h2>
					<p>朴实无华 平凡是真 看完喧嚣的你 是时候沉淀了￥189</p>
				</div></div></a>
						
						
						
						
						
						
                <a href="./product.html"><div class="star-unkind-9">
				<img src="./img/jp/9.jpg" alt="">
				
				<div class="text-1">
					<h2>BiLiBiLi 2233娘  <span>茶轴（TTC轴）</span> <br>来自叔叔的爱！</h2>
					<p>陈叔叔的无敌韭菜收割机 $万兆日元 只支持日元结算 乾杯 []~（￣▽￣）~*
					不买叔叔要倔你全家捏</p>
				</div></div></a>
						
						
						
						
						
						
                <a href="./product.html"><div class="star-unkind-10">
				<img src="./img/jp/10.jpg" alt="">
				
				<div class="text-1">
					<h2>CHERRY彩轴背板 <span>樱桃彩轴</span> <br>支持花呗</h2>
					<p>无断触 无不良 不议价 诚信交易 ￥762</p>
				</div></div></a>
						
						
						
						
						
						
                <a href="./product.html"><div class="star-unkind-11">
				<img src="./img/jp/11.jpg" alt="">
				
				<div class="text-1">
					<h2>包盒108 86 124   <span>Cherry彩轴</span> <br>支持花呗 </h2>
					<p>
						无断触 无不良 不议价 诚信交易 ￥25-200 <br>
						同收 垃圾佬的贩子人生
					</p>
					
				</div></div></a>
						
						
						
						
						
						
                <a href="./product.html"><div class="star-unkind-12">
				<img src="./img/jp/12.jpg" alt="">
				
				<div class="text-1">
					<h2>背板RGB <span>（TTC）</span> <br>UNKIND-20</h2>
					<p>靥笑春桃兮，云堆翠髻；唇绽樱颗兮，榴齿含香 ￥125-2000</p>
				</div></div> </a>
	
		</div>
	</div>
	
	<div class="boddy3">
		
	</div>
	
	<script>
	        // 获取需要操作的元素
	        // 左边大图
	        let big_box=document.querySelector(".big-box");
	        // 图片集合
	        let imgs=document.getElementsByClassName("img");
	        // 定时器
	        let timer=null;
	        // 当前图片下标
	        let index=0;
	
	        // 重置函数
	        function reset(){
	            for(let i=0;i<imgs.length;i++){
	                imgs[i].className="img";
	            }
	        }
	        // 选中函数
	        function selected(){
	            reset();
	            imgs[index].className="img active";
	        }
	        // 轮播函数
	        function play(){
	            timer=setInterval(function(){
	                selected();
	                index++;
	                big_box.style.backgroundImage="url(./img/ox/"+index+".jpg)";
	                if(index==5){
	                    index=0;
	                }
	            },1500);
	        }
	        // 循环绑定每个小图片的鼠标移动事件
	        for(let i=0;i<imgs.length;i++){
	            // 鼠标移动到小图片上时触发
	            imgs[i].onmousemove=function(){
	                // 左边大图变成当前的小图片
	                big_box.style.backgroundImage="url(./img/ox/"+(i+1)+".jpg)";
	                // 执行重置函数并关闭定时器
	                reset();
	                clearInterval(timer);
	                // 更新当前图片下标并执行轮播
	                index=i+1;
	                if(index==5){
	                    index=0;
	                }
	                play();
	            }
	        }
	        // 执行轮播
	        play();
	    </script>
	<div class="but-low">
		<img src="./img/low.png" alt="">
	</div>
	
</body>
</html>